<template>
	<view style="position:absolute;top:0;left:0;right:0;bottom:0;display: flex;
	justify-content: center;align-items: center;background-color:rgba(0, 0, 0, 0.5);"
	    :style="{transform:show?'translateX(0)':'translateX(100%)'}"
	>
		
		
		<!-- #ifdef MP-WEIXIN -->
		<view v-if="show" style="position: absolute;top:124upx;left:20upx;">
			<ad-custom :unit-id="adGridYi"></ad-custom>
		</view>
		<!-- #endif -->
		
		<view class="awga-transform" style="width:500upx;height:600upx;background-color:#fff;
		display:flex;align-items:center;justify-content:center;border-radius:18px;"
		    :style="{
				transform:content?'scale(1)':'scale(0.4)',
				opacity:content?1:0.4
			}"
		>
			
			<view style="display: flex;flex-direction: column;align-items: center;">
				
				
				<view class="awga-awgaZidan"></view>
				
				<view style="font-size:38upx;font-weight:bold;color: #999;">
					弹药不足
				</view>
				
				
				<view @click="startClick('end')" style="background-color:#fbbd08;border-radius:100px;text-align:center;margin-top:40upx;width:240upx;">
					<view style="padding:16upx;color:#2C405A;font-size: 30upx;">
						结束游戏
					</view>
				</view>
				
				<template v-if="danyao>=1">
					<view @click="startClick('video')" style="background-color:#00bcd4;border-radius:100px;text-align:center;margin-top:40upx;width:240upx;">
						<view style="padding:16upx;display:flex;align-items:center;justify-content:center;">
							<view style="color:#fff;font-size:30upx;">看视频 +{{danyao}}</view>
							<view class="awga-jinbi-dan"></view>
						</view>
					</view>
					
					
					<view style="margin-top:4upx;display:flex;align-items:center;justify-content:center;">
						<view style="color:#2C405A;font-size:20upx;">看激励视频补充弹药得{{danyao}}</view>
						<view class="awga-jinbi-dan"></view>
					</view>
				</template>	
				
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	import siteinfo from "./siteinfo.js";
	export default {
		name: "haichongZidan",
		data() {
			return {
				
				adGridYi: siteinfo.adGridYi,
				
				danyao: 0,
				show: false,
				content: false
			};
		},
		methods: {
			awgaShow: function(data){
				this.danyao = data;
				this.show = true;
				this.content = true;
			},
			awgaHide: function() {
				var _me = this;
				_me.show = false;
				setTimeout(() => {
					_me.content = false;
				},50);
			},
			startClick: function(e) {
				this.$emit('ZidanClick',e);
				this.awgaHide();
			}
		}
	}
</script>

<style scoped>
	
	.awga-transform{
		transition-timing-function: ease;
		transition-duration: 0.3s;
		transition-property: transform,opacity;
	}
	
	.awga-jinbi-dan{
		width:40upx;height:40upx;
		background-image: url('');
	    background-repeat:no-repeat;
	    background-size:100%;
	}
	
	.awga-awgaZidan{
		transform:scale(0.7);
		width:146px;height:128px;
		background-image: url('');
	    background-repeat:no-repeat;
	    background-size:100%;
	}
</style>

